<template>
  <div class="commenu">
    <div @click="shouqi" class="logo"></div>
    <ul>
      <!-- <li class="icon icon0" >
        <a @click="shouqi">{{control}}</a>
      </li> -->
      <li @click="menuclick(index)" v-for="(item,index)  in menuList" v-bind:key="item.name" :class="'icon icon' + item.icon + (item.isactive?' active':'')">
        <!-- <a>{{item.name}}</a> -->
        <router-link :to="item.path">{{item.name}}</router-link>
        <ul>
          <li @click="menusunclick(index,sindex)" v-for="(son,sindex) in item.son" v-bind:key="son.name" :class="'icon icon' + son.icon + (son.isactive?' active':'')">
            <router-link :class="son.isactive?' active':''" :to="son.path">{{son.name}}</router-link>
            <ul>
              <li @click="menusunclick(index,sindex,ssindex)" v-for="(sonson,ssindex) in son.son" v-bind:key="sonson.name">
                <router-link :class="sonson.isactive?' active':''" :to="sonson.path">{{sonson.name}}</router-link>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "Menu",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc: ""
      },
      control: "收起",
      path: "",
      menuList: [
        { name: "仪表盘", icon: "dashboard", path: "" },
        {
          name: "画像",
          icon: "portrait",
          path: "",
          isactive: true,
          son: [
            {
              name: "网络画像",
              icon: "",
              path: "/portrait1",
              isactive: true
            },
            {
              name: "业务画像",
              icon: "",
              path: "/portrait2"
            }
          ]
        },
        {
          name: "搜索",
          icon: "search",
          path: "",
          son: [
            {
              name: "会话",
              icon: "",
              path: "/conversion"
            },
            {
              name: "日志",
              icon: "",
              path: "/log"
            },
            {
              name: "安全事件",
              icon: "",
              path: "/event"
            }
          ]
        },
        { name: "告警/预警", icon: "alarm", path: "/emergency" },
        {
          name: "业务设置",
          icon: "Businesssetup",
          path: "",
          son: [
            {
              name: "画像对象",
              icon: "",
              path: "/businessPortrait"
            },
            {
              name: "网络组件",
              icon: "",
              path: "/businessNet"
            },
            {
              name: "应用组件",
              icon: "",
              path: "/businessApp"
            },
            {
              name: "交易组件",
              icon: "",
              path: "/businessTrade"
            },
            {
              name: "URL交易",
              icon: "",
              path: "/businessUrl"
            },
            {
              name: "告警设置",
              icon: "",
              path: "", 
              son: [
                {
                  name: "告警规则",
                  icon: "",
                  path: "/businessAlert" 
                },
                {
                  name: "发送策略",
                  icon: "",
                  path: "/businessSend"
                }
              ]
            },
            {
              name: "事件设置",
              icon: "",
              path: "/businessEvent"
            },
            {
              name: "地址设置",
              icon: "",
              path: "/businessAddress"
            },
            {
              name: "安全设置",
              icon: "",
              path: "/businessSave"
            },
            {
              name: "日志采集",
              icon: "",
              path: "/businessLog"
            },
            {
              name: "快照设置",
              icon: "",
              path: "/businessPhoto"
            }
          ]
        },
        {
          name: "系统设置",
          icon: "SystemSettings",
          path: "",
          son: [
            {
              name: "基本设置",
              icon: "",
              path: "/sysBase"
            },
            {
              name: "角色管理",
              icon: "",
              path: "/sysRole"
            },
            // {
            //   name: "角色设置",
            //   icon: "",
            //   path: "/sysRoleSetting"
            // },
            {
              name: "账户设置",
              icon: "",
              path: "/sysAcount"
            },
            {
              name: "日志列表",
              icon: "",
              path: "/sysLog"
            },
            {
              name: "服务设置",
              icon: "",
              path: "/sysServer"
            }
          ]
        },
        {
          name: "报表",
          icon: "report-sidenavigation",
          path: "",
          son: [
            {
              name: "基础类报表",
              icon: "",
              path: "/reportBase"
            },
            {
              name: "分析类报表",
              icon: "",
              path: "/reportAng"
            },
            {
              name: "日志类报表",
              icon: "",
              path: "/reportLog"
            },
            {
              name: "安全类报表",
              icon: "",
              path: "/reportSafe"
            },
            {
              name: "辅助类报表",
              icon: "",
              path: "/reportSub"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    // console.log(location.href,this.$router.history.current)
  },
  methods: {
    dialogAddSubmit() {
      if (
        this.dialogAddForm.name.length < 3 ||
        this.dialogAddForm.name.length > 10
      ) {
        alert(
          "长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符"
        );
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
      if (!reg.test(this.dialogAddForm.ip)) {
        alert(
          "只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255"
        );
        return false;
      }
      if (this.dialogAddForm.desc > 30) {
        alert("备注信息最大不超30个中文字符");
        return;
      }
    },
    shouqi() {
      if ($(".view-index").hasClass("close")) {
        $(".view-index").removeClass("close");
        $(".menucontrol").removeClass("close");
        this.control = "收起";
      } else {
        $(".view-index").addClass("close");
        $(".menucontrol").addClass("close");
        this.control = "展开";
      }
    },
    menuclick(index) {
      this.menuList.forEach(i => {
        i.isactive = false;
      });
      this.menuList[index].isactive = true;
      this.$set(this.menuList, index, this.menuList[index]);
    },
    menusunclick(index, sindex, ssindex) {
      this.menuList[index].son.forEach(i => {
        i.isactive = false;
      });
      this.menuList[index].son[sindex].isactive = true;
      this.$set(
        this.menuList[index].son,
        sindex,
        this.menuList[index].son[sindex]
      );
      if (ssindex!=null) {
        this.menuList[index].son[sindex].son.forEach(i => {
          i.isactive = false;
        });
        this.menuList[index].son[sindex].son[ssindex].isactive = true;
        this.$set(
          this.menuList[index].son[sindex].son,
          ssindex,
          this.menuList[index].son[sindex].son[ssindex]
        );
        // console.log(this.menuList);
      }
    }
  }
};
</script>

 
<style scoped lang="scss">
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #05544c;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.logo {
  background: url(../assets/logo.png) no-repeat center center;
  width: 171px;
  height: 96px;
}
.commenu {
  > ul {
    top: 96px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    overflow-y: auto;
    > li {
      background: url() no-repeat 27px 17px;
      > ul {
        display: none;
        background: rgba(5, 84, 76, 1);
        > li {
          &.active {
            ul {
              display: block;
            }
          }
          > ul {
            display: none;
            li {
              a {
                // font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                padding-left: 75px;
                // color: rgba(168, 171, 179, 1);
                background:transparent;
                &.active {
                 color: #e3fffc;
                }
                &::before {
                  display: none;
                  content: "";
                  position: absolute;
                  width: 4px;
                  height: 4px;
                  background: rgba(80, 109, 143, 1);
                  left: 61px;
                  top: 20px;
                  border-radius: 100%;
                }
              }
            }
          }
          a {
            cursor: pointer;
            position: relative;
            display: block;
            height: 46px;
            line-height: 46px;
            font-weight: 600;
            color: #9dc1bd;
            font-size: 14px;
            padding-left: 73px;
            &.active {
              color: #e3fffc;
            }
            &::before {
              content: "";
              position: absolute;
              width: 6px;
              height: 6px;
              background: #9dc1bd;
              left: 61px;
              top: 20px;
              border-radius: 100%;
            }
          }
        }
      }
      > a {
        cursor: pointer;
        color: rgba(255, 255, 255, 0.6);
        padding-left: 67px;
        font-size: 16px;
        height: 54px;
        line-height: 54px;
        display: block;
      }
      @each $i in dashboard, portrait, search, alarm, Businesssetup,
        SystemSettings, report-sidenavigation
      {
        &.icon#{$i} {
          background-image: url("../assets/#{$i}.png") !important;
        }

        &.icon#{$i}:hover,
        &.active.icon#{$i} {
          background-image: url("../assets/#{$i}_a.png") !important;
        }
      }
      &.icon0 {
        background-image: url("../assets/menu1_a.png");
        background-size: 25px 25px;
        background-position: 23px 17px;
      }
      &.icon0:hover,
      &.active.icon0 {
        background-image: url("../assets/menu1.png");
      }

      &:hover,
      &.active {
        background-color: #e3fffc;
        > a {
          color: rgba(0, 121, 106, 1);
        }
      }
      &.active {
        > ul {
          display: block;
        }
      }
    }
  }
}
.close {
  .icon0 {
    background-image: url("../assets/menu0_a.png") !important;
    background-size: 20px 20px;
  }
  .icon0:hover,
  .active.icon0 {
    background-image: url("../assets/menu0.png") !important;
  }
}
</style>
